<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令</title>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			ul{
				list-style: none;
			}
			ul li{
			}
		</style>
	</head>
	<body>
		<div id="app">
			<fieldset>
				<legend>v-if/v-else/v-show控制元素显示隐藏</legend>
                <p>v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。</p>
				<h1 v-if="isfalse">标题1</h1>
				<h1 v-else>标题2</h1>
				<h1 v-else>标题3</h1>
				
				<h1 v-if="istrue">标题4</h1>
				<h1 v-else>标题5</h1>
				<button type="button" @click="istrue=!istrue">显示与隐藏</button>
				
				<h1 v-show="istrue">标题4</h1>
			</fieldset>
			
        <fieldset>
            <legend>v-for循环</legend>
            <ul>
                <li v-for="(pg, index) in pgbdb">
                    <a :href="pg.fkwwz"><h1>名字{{pg.title}}</h1>
                    <p>押金{{pg.dbf}}</p></a>
                </li>
            </ul>
            <br>
            <p v-for="(v,k,i) in objpgb">
                value:{{v}} key:{{k}} 下标{{i}}
            </p>
            <p v-for="(v,i) in objpgb.yy">
                value:{{v}} 下标{{i}}
            </p>
            <p>他可以循环数组，也可以循环对象</p>
            <p>循环数组：v-for="(值value,下标index) in 数组名"</p>
            <p>上方的示例中value值是一个对象</p>
            <p>循环对象：v-for="(值value,属性名key,下标index) in 对象名"</p>
            <p>当然阅读了vue官网文档后建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。</p>
            <p>Vue为了提升将来如果发生数据重排的效率问题，建议给每个v-for的标签v-bind一个key属性，key属性的值要求具有唯一性，尽可能从循环的数据里找，是在找不到再用下标</p>
        </fieldset>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					isfalse:false,
					istrue:true,A
					pgbdb:[{
						"title": "\u7a0b\u5e06\u74f6\u76d6\u7f51",
						"litpic": "\/uploads\/allimg\/210516\/chenfan.jpg",
						"dbf": "600",
						"fkwwz": "http:\/\/cheng.cfsvip.cn\/?8889999999"
					}, {
						"title": "\u5341\u6212\u6742\u8d27\u94fa",
						"litpic": "\/uploads\/allimg\/210516\/shijie.png",
						"dbf": "255",
						"fkwwz": "http:\/\/sjfkw.psrrcny.cn"
					}, {
						"title": "\u9752\u8292\u74f6\u76d6\u7f51",
						"litpic": "\/uploads\/allimg\/210516\/qingmang.png",
						"dbf": "300",
						"fkwwz": "http:\/\/qm.waa.cn"
					}, {
						"title": "\u963f\u8c6a\u8f6f\u4ef6\u94fa",
						"litpic": "\/uploads\/allimg\/210603\/1-21060320263C01.png",
						"dbf": "180",
						"fkwwz": "http:\/\/89dh.top\/"
					}, {
						"title": "\u8ffd\u68a6\u74f6\u76d6\u7f51",
						"litpic": "\/uploads\/allimg\/210516\/shiduo.jpg",
						"dbf": "360",
						"fkwwz": "http:\/\/vx.zmwl888.com\/"
					}, {
						"title": "\u5b50\u9edd\u74f6\u76d6\u7f51",
						"litpic": "\/uploads\/allimg\/210516\/shiduo.jpg",
						"dbf": "120",
						"fkwwz": "http:\/\/ziyou.waa.cn\/"
					}, {
						"title": "\u8363\u8000\u74f6\u76d6\u7f51",
						"litpic": "\/uploads\/allimg\/210814\/1-210Q41009552S.jpg",
						"dbf": "50",
						"fkwwz": "http:\/\/rongyao.waa.cn\/"
					}, {
						"title": "\u6c64\u5706\u74f6\u76d6\u7f51",
						"litpic": "\/uploads\/allimg\/210516\/tangyuan.png",
						"dbf": "225",
						"fkwwz": "http:\/\/ty.pgfkw.ltd\/"
					}],
					objpgb: {
						"title": "\u6768\u5c11\u74f6\u76d6\u7f51",
						"litpic": "\/uploads\/allimg\/210516\/yangshao.png",
						"dbf": "150",
						"fkwwz": "http:\/\/ysfkwl.cn\/",
						yy:["本香","蒙牛","发票"]
					}
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>
